<template>
  <div class="order-wrapper">
    <div class="dian"><img src="../../assets/头部.png"></div>
    <div class="head">
      <span class="span">我的订单</span>
    </div>
    <div class="car">
      <div class="card" v-for="item in dataList" :key="item.id">
        <div class="card-head">
          <span class="store-name">{{item.storeName}}</span>
          <span
            :class="item.status ==='已完成'? 'status success-status':'status'" >{{item.status}}</span>
            
        </div>
        <div class="card-body">
          <div class="left-wrapper">
            <!-- <div class="img" v-for="(img,index) in  item.img" :key="index"> -->
            <div class="img" v-for="(img,index) in item.imgs" :key="index">
              <img :src="img.imgsrc">
            </div>
          </div>
          <div class="right-wrapper">
            <span class="price">￥{{item.price}}</span>
            <span class="nums">共{{item.nums}}件</span>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script >
export default {
  // name: 'Category'
  data(){
    return{
      dataList:[{
        id:1,
        storeName:'沃尔玛',
        status:'已取消',
        imgs:[{imgsrc:require("../../assets/yingtao.png")},
             {imgsrc:require("../../assets/putao.png")},
             {imgsrc:require("../../assets/huolong.png")},
             {imgsrc:require("../../assets/apple.png")}],
        price:66.4,
        nums:10
      },{
        id:2,
        storeName:'福泰隆',
        status:'已完成',
        imgs:[{imgsrc:require("../../assets/chengzi.png")},
             {imgsrc:require("../../assets/caimei.png")},
             {imgsrc:require("../../assets/putao.png")}],
        price:2.88,
        nums:3
      }]
    }
  }
  // created(){
  //   for(let i=1;i<10;i++){
  //     this.dataList.push({
  //       id:2,
  //       storeName:'福泰隆',
  //       status:'已完成',
  //       img:[1,2,3],
  //       price:2.88,
  //       nums:3
  //     })
  //   }
  // }
}
</script>

<style lang="css" scoped>
.order-wrapper{
  width: 100vw;
  min-height:100vh ;
  background-color: #f3efef;
}
.dian{
  width: 100%;
  height: 5vw;
  position: fixed;
  top: 0;
}
.dian img{
  width: 100%;
  height: 5vw;
}
.head{
  width: 100%;
  position: fixed;
  top: 4vw;
  height: 18vw;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}
.span{
  color: black;
  font-size:5.5vw ;
  font-weight: 400;
}
 .car{
  margin-top: 22vw;
  width: 100%;
  margin: 23vw auto 0 auto;
  /* padding: 3vw 4vw;  */
  border: 1px #f3efef solid; 
 }
.card{
  width: 85vw;
  margin-top: 4vw;
  margin: 4vw auto 0 auto;
  background-color: white;
  padding: 3vw 4vw;
  border-radius: 1.5vw;
}
.card-head{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.store-name{
  font-size: 5vw;
  font-weight: 600;
}
.success-status{
  color: green !important;
}
.status{
  font-size: 4vw;
  color: gray;
}
.card-body{
  display: flex;
  justify-content: space-between;
  margin-top: 5vw;
}
.left-wrapper{
  display: flex;
}
.img{
  height: 11vw;
  width: 11vw;
  /* background-color: pink; */
  border-radius: 50%;
}
.img img{
  height: 11vw;
  width: 11vw;
  border-radius: 50%;
}
.right-wrapper{
  display: flex;
  flex-direction: column;
  text-align: right;
}
.price{
  color: red;
  font-size:5vw ;
}
.nums{
  color: #333;
  font-size: 4vw;
}

</style>
